<template>
  <el-dialog
    v-model="props.windowValue"
    title="图片缓存区域"
    width="1000"
    :before-close="handleClose"
  >
  
  <BoxItem /> 
  <!-- <div v-if="$store.state.Base64List.length !== 0">  </div> -->
  
 
  <!-- <div v-if="fileList.length === 0">数据正在加载</div> -->
  <!-- <div> -->
  <!-- {{ $store.state.PhotoList }} -->
  <!-- {{ fileList }} -->
  <!-- {{ fileListComputed }} -->
  <!-- </div> -->
  <!-- <div>
   
  </div> -->
  <!-- <img src="../assets/bj1.png"></img> -->
  <!-- <img :src="imageBase64" alt="Base64 Image" style="width: 200px;height: 200px;"> -->
  <!-- <el-upload
    :file-list="fileList"
    list-type="picture-card"
    :on-change="handleChange"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :auto-upload="true"
  > -->
      <!-- <el-icon><Plus /></el-icon> -->
       <!-- <template #default>  -->
         <!-- <el-button @click="handleManualAdd">手动添加文件</el-button> -->
      <!-- </template>  -->
    <!-- </el-upload> -->
    <!-- <el-button @click="handleManualAdd">手动添加文件</el-button> -->
    <!--预览-->
    <!-- <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog> -->
     <div class="addReduce">
      <el-input v-model="addNum" type="text" placeholder="请输入缺少页数页码"></el-input class="button"><el-button type="success" @click="Add">添加</el-button>
      <el-input v-model="reduceNum" type="text" placeholder="请输入多余页数页码"></el-input class="button"><el-button type="danger" @click="Reduce">删除</el-button>
      </div>  

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">
          确认
        </el-button>
      </div>
    </template>
    
  </el-dialog>
 
</template>

<script lang="ts" setup>
import { onMounted, ref,computed } from 'vue'
import { send1Photo } from '../api/photo'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { add,reduce } from '../api/edit'
import { ElMessage } from 'element-plus'

import BoxItem from './BoxItem.vue';

const router = useRouter()
const store = useStore()
const addNum = ref()
const reduceNum = ref()


const props = defineProps({
       windowValue:Boolean,
       photoList:Array
})
// const imageBase64 = ref('')
const emits = defineEmits(['ChangeWindowVisible','handleFileSelect']) 

// const PhotoList = computed(() => store.state.PhotoList);

// const fileList = ref({
//   url:''
// })
// const fileList = computed(() => {
//       if (PhotoList.value.length === 0) {
//         return [];
//       }
//       return PhotoList.value.map(url => ({ url }));
//     });
// onMounted(()=>{
//   console.log(fileList.value)
// })
// onBeforeUpdate(()=>{
//   console.log(fileList.value)
// })

// const handleRemove = (file) => {
//   // 文件移除的逻辑
//   // 调用共享的更新函数
//   updateFileList(fileList => fileList.filter(item => item.url !== file.url));
// };
// const handleChange = () => {
//   // 当文件发生变化时，调用共享的更新函数
//   updateFileList(fileList => fileList); // 如果是添加文件，可以在这里添加新的文件对象
// };
// const handleManualAdd = (newFilePath) => {
//   // 当手动添加文件时，更新 fileList
//   // 这里 newFilePath 是一个新文件的路径
//   const newFile = { url: newFilePath }; // 创建一个新的文件对象
//   updateFileList([...fileList.value, newFile]);
// };
// 共享的更新文件列表的函数
// const updateFileList = (updateFn) => {
//   // 更新 PhotoList 的值
//   PhotoList.value = updateFn(fileList.value);
// };
    // handleRemove(file, fileList) {
    //   // 当文件被移除时，更新 fileList
    //   this.fileList = fileList;
    // }
 
  // {
  //   // name: 'food.jpeg',
  //   url: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202310251928_35fb2880108e9aa56fdcf7f894249f26.png?thumb=1&w=250&h=250&f=webp&q=90',
  // },
  // {
  //   // name: 'plant-1.png',
  //   url: '/images/plant-1.png',
  // }


// const dialogImageUrl = ref('')
// const dialogVisible = ref(false)

const handleClose = () => {
      emits('ChangeWindowVisible')
}

const cancel = () => {
      emits('ChangeWindowVisible')
}

const confirm = async() => {
  console.log(store.state.Base64List.value)
  const res = await send1Photo(store.state.Base64List.value) //没有转json格式，是普通对象格式
  console.log(res)
  if(res.msg == 'success'){
    ElMessage({
             message: '扫描成功，请进行分类判断',
             type: 'success',
             offset: 50
        })
        router.push('/scan')
        emits('ChangeWindowVisible')
  }else{
    ElMessage.error('扫描失败，请重新扫描')
  }
  console.log(typeof(res.data))
  store.commit('classify',res.data)
}

const Add = async() =>{
  console.log(typeof(addNum.value))
      if(typeof(addNum.value) === 'string'){
        const res = await add(addNum.value-1)
        console.log(res)
      }
      
      
}

const Reduce = async() =>{
  console.log(typeof(reduceNum.value))
      if(typeof(reduceNum.value) === 'string'){
        const res = await reduce(reduceNum.value-1)
        console.log(res)
      }
      
}

</script>

<style scoped>
.el-dialog {
  position: relative;
}
.el-dialog img {
  width: 100%;
}

.addReduce {
  position:absolute;
  bottom: 15px;
  left: 150px;
  /* background-color: pink; */
  display: flex;
}
.addReduce .el-button {
  margin:0 10px;
}

</style>
